import React, { useState, useEffect } from "react";
import { Input, Switch, Upload, Form, message, Button } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';

import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { baseUrl, getModify } from "../../../../../api/lf";
interface propsType {
    modInfo: DataType | null,
    setIsModalOpen(one: boolean): any,
    getAllShop(): any
}

interface DataType {
    key: React.Key;
    goodsId: string;//商品序号
    goodsImg: string;//商品图片
    goodsName: string;//商品名字
    goodsSerNum: number;//商品货号
    goodsPriceRange: string;//商品价格区间
    categoryName: string;//类别
    brandName: string;//品牌名baseUrl
    goodsStatus: string;//是否上架
    goodsSell: string;//销量

}
export default function Modify(props: propsType) {
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();
    const [shelf, setShelf] = useState<boolean>()//是否上架
    const [goodsStatus, setGoodsStatus] = useState<number>()
    /* const [modInfo, setModInfo] = useState<DataType>(); */

    const { modInfo } = props
    /* console.log('props', modInfo); */
    const [form] = Form.useForm();


    useEffect(() => {
        console.log("props", props);
        setImageUrl(baseUrl + props.modInfo?.goodsImg)
        setShelf(props.modInfo?.goodsStatus == '4' ? true : false)

        /*  setModInfo(props.modInfo) */
        form.setFieldsValue({
            goodsId: props.modInfo?.goodsId,//商品序号
            goodsImg: props.modInfo?.goodsImg,//商品图片
            goodsName: props.modInfo?.goodsName,//商品名字
            goodsSerNum: props.modInfo?.goodsSerNum,//商品货号
            goodsPriceRange: props.modInfo?.goodsPriceRange,//商品价格区间
            categoryName: props.modInfo?.categoryName,//类别
            brandName: props.modInfo?.brandName,//品牌名baseUrl
            goodsStatus: props.modInfo?.goodsStatus,//是否上架
            goodsSell: props.modInfo?.goodsSell//销量

        })



    }, [props])


    const onFinish = (value: any) => {
        console.log(value);
        props.setIsModalOpen(false)
        let formData = { ...value, goodsStatus: goodsStatus };
        console.log('formData', formData);
        getModify(formData).then(res => {
            console.log('修改成功', res);
            props.getAllShop()
            message.success('修改成功', 2)
        }).catch(err => {
            console.log('err', err);
            message.error('修改失败', 2)
        })
    }
    const onReset = () => {
        form.resetFields();
        props.setIsModalOpen(false)
    };
    //上架按钮
    const onChange = (checked: boolean) => {
        console.log(`是否上架 ${checked}`);
        setShelf(checked)
        if (checked) {
            setGoodsStatus(4)
        } else {
            setGoodsStatus(5)
        }
    };


    //图片的方法
    const getBase64 = (img: RcFile, callback: (url: string) => void) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result as string));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file: RcFile) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };



    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </div>
    );


    return <div>
        {/* 编辑弹框 */}

        <Form onFinish={onFinish} form={form}>
            <Form.Item label="序号" name='goodsId'

            >
                <Input />
            </Form.Item>
            <Form.Item label="商品图片" name='goodsImg' >
                <Upload

                    listType="picture-circle"
                    className="avatar-uploader"
                    showUploadList={false}

                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                    {imageUrl ? <img src={imageUrl} style={{ width: '100%' }} /> : uploadButton}
                </Upload>
            </Form.Item>
            <Form.Item label="商品名称"
                name='goodsName'
            >
                <Input />
            </Form.Item>
            <Form.Item label="货号"
                name='goodsSerNum'
            >
                <Input />
            </Form.Item>
            <Form.Item label="价格"
                name='goodsPriceRange'
            >
                <Input />
            </Form.Item>
            <Form.Item label="分类"
                name='categoryName'
            >
                <Input />
            </Form.Item>
            <Form.Item label="品牌"
                name='brandName'
            >
                <Input />
            </Form.Item>
            <Form.Item label="是否上架">
                <Switch checked={shelf} onChange={onChange} />
            </Form.Item>
            <Form.Item label="销量"
                name='goodsSell'
            >
                <Input />
            </Form.Item  >
            <Form.Item wrapperCol={{ offset: 8, span: 18 }} >
                <Button type="primary" htmlType="submit">
                    确认
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    取消
                </Button>

            </Form.Item>
        </Form>

    </div>
}